<template>
  <div>
    <!-- 头像、余额、姓名、是否认证、设置消费上限 -->
    <div class="main_box">
      <div>
        <img
          src="../assets/images/logo.png"
          alt=""
          height="100px"
          class="main_img"
        />
      </div>
      <div
        style="color: white; vertical-align: top; margin: 8% 0px; float: left"
      >
        <span>
          <strong style="font-size: 22px">{{ username }}</strong>
        </span>
        <br />
        <br />
        <span style="color: white">{{ userId }}</span>
      </div>
      <div
        style="
          position: absolute;
          bottom: 50px;
          font-size: 15px;
          margin-left: 8%;
          color: white;
        "
      >
        账户余额
      </div>
      <div class="bhead">
        <div
          style="
            position: absolute;
            bottom: 15px;
            font-size: 22px;
            margin-left: 18%;
            color: white;
            float: left;
          "
        >
          <strong>￥{{ balance }}</strong>
        </div>
        <div
          style="
            position: absolute;
            float: right;
            bottom: 7%;
            font-size: 15px;
            color: white;
            right: 5%;
            cursor: pointer;
          "
          @click="goLimit"
        >
          <!-- <a href="../Limit"> -->
          <img
            src="../assets/images/settings.png"
            style="width: 20px; height: 20px; vertical-align: top"
          />
          <span>设置消费限额</span>
          <!-- </a> -->
        </div>
      </div>
    </div>

    <!-- 五个主要功能按钮 -->
    <div class="mfbox">
      <div class="mfcbox" @click="goIncome" style="cursor: pointer">
        <!-- <a href="../Income"> -->
        <img
          src="../assets/images/income.png"
          style="
            width: 40px;
            height: 40px;
            margin: 10px 0px 0px 0px;
            vertical-align: middle;
          "
        />
        <span>收款</span>
        <!-- </a> -->
      </div>
      <div class="mfcbox" @click="goPay" style="cursor: pointer">
        <img
          src="../assets/images/pay.png"
          style="
            width: 40px;
            height: 40px;
            margin: 10px 0px 0px 0px;
            vertical-align: middle;
          "
        />
        <span>支付</span>
      </div>
      <div class="mfcbox" @click="goTransfer" style="cursor: pointer">
        <img
          src="../assets/images/transfer.png"
          style="
            width: 40px;
            height: 40px;
            margin: 10px 0px 0px 0px;
            vertical-align: middle;
          "
        />
        <span>转账</span>
      </div>
      <div class="mfcbox" @click="goWithdraw" style="cursor: pointer">
        <img
          src="../assets/images/withdraw.png"
          style="
            width: 40px;
            height: 40px;
            margin: 10px 0px 0px 0px;
            vertical-align: middle;
          "
        />
        <span>提现</span>
      </div>
      <div class="mfcbox" @click="goDeposit" style="cursor: pointer">
        <img
          src="../assets/images/deposit.png"
          style="
            width: 40px;
            height: 40px;
            margin: 10px 0px 0px 0px;
            vertical-align: middle;
          "
        />
        <span>存款</span>
      </div>
    </div>

    <div style="text-indent: 1em; font-size: 14px">本月消费明细</div>
    <el-row style="margin-top: 4%">
      <el-col :span="4" style="margin-left: 6%; font-size: 18px">餐饮</el-col>
      <el-col :span="14">
        <el-progress
          stroke-width="16"
          text-inside="true"
          :percentage="getPercentage(set.resAmount, used.res)"
          :color="color(getPercentage(set.resAmount, used.res))"
          :format="format(set.resAmount, used.res)"
          style="margin-top: 1.5%"
        ></el-progress>
      </el-col>
      <el-col
        :span="4"
        style="margin-top: 2px; text-indent: 25px; font-size: 18px"
        >￥{{ set.resAmount }}</el-col
      >
    </el-row>

    <el-row style="margin-top: 4%">
      <el-col :span="4" style="margin-left: 6%; font-size: 18px">交通</el-col>
      <el-col :span="14">
        <el-progress
          stroke-width="20"
          text-inside="true"
          :percentage="getPercentage(set.tranAmount, used.tran)"
          :color="color(getPercentage(set.tranAmount, used.tran))"
          :format="format(set.tranAmount, used.tran)"
          style="margin-top: 1.5%"
        ></el-progress>
      </el-col>
      <el-col
        :span="4"
        style="margin-top: 2px; text-indent: 25px; font-size: 18px"
        >￥{{ set.tranAmount }}</el-col
      >
    </el-row>

    <el-row style="margin-top: 4%">
      <el-col :span="4" style="margin-left: 6%; font-size: 18px">住宿</el-col>
      <el-col :span="14">
        <el-progress
          stroke-width="20"
          text-inside="true"
          :percentage="getPercentage(set.liveAmount, used.live)"
          :color="color(getPercentage(set.liveAmount, used.live))"
          :format="format(set.liveAmount, used.live)"
          style="margin-top: 1.5%"
        ></el-progress>
      </el-col>
      <el-col
        :span="4"
        style="margin-top: 2px; text-indent: 25px; font-size: 18px"
        >￥{{ set.liveAmount }}</el-col
      >
    </el-row>

    <el-row style="margin-top: 4%">
      <el-col :span="4" style="margin-left: 6%; font-size: 18px">娱乐</el-col>
      <el-col :span="14">
        <el-progress
          stroke-width="20"
          text-inside="true"
          :percentage="getPercentage(set.playAmount, used.play)"
          :color="color(getPercentage(set.playAmount, used.play))"
          :format="format(set.playAmount, used.play)"
          style="margin-top: 1.5%"
        ></el-progress>
      </el-col>
      <el-col
        :span="4"
        style="margin-top: 2px; text-indent: 25px; font-size: 18px"
        >￥{{ set.playAmount }}</el-col
      >
    </el-row>

    <el-row style="margin-top: 4%">
      <el-col :span="4" style="margin-left: 6%; font-size: 18px">学习</el-col>
      <el-col :span="14">
        <el-progress
          stroke-width="20"
          text-inside="true"
          :percentage="getPercentage(set.studyAmount, used.study)"
          :color="color(getPercentage(set.studyAmount, used.study))"
          :format="format(set.studyAmount, used.study)"
          style="margin-top: 1.5%"
        ></el-progress>
      </el-col>
      <el-col
        :span="4"
        style="margin-top: 2px; text-indent: 25px; font-size: 18px"
        >￥{{ set.studyAmount }}</el-col
      >
    </el-row>

    <el-row style="margin-top: 4%">
      <el-col :span="4" style="margin-left: 6%; font-size: 18px">其他</el-col>
      <el-col :span="14">
        <el-progress
          stroke-width="20"
          text-inside="true"
          :percentage="getPercentage(set.otherAmount, used.other)"
          :color="color(getPercentage(set.otherAmount, used.other))"
          :format="format(set.otherAmount, used.other)"
          style="margin-top: 1.5%"
        ></el-progress>
      </el-col>
      <el-col
        :span="4"
        style="margin-top: 2px; text-indent: 25px; font-size: 18px"
        >￥{{ set.otherAmount }}</el-col
      >
    </el-row>
    <!-- </el-card> -->

    <!-- 页面底端信息 -->
    <div class="footer">
      <!-- 底端横线 -->
      <div style="height: 1px; border: none; border-top: 1px solid #ccc"></div>
      <div class="lbox" @click="goHome">首页</div>
      <div class="rbox" @click="goMyPage">我的</div>
    </div>
  </div>
</template>

<script>
// import { set } from "vue/types/umd";
export default {
  name: "Home",
  data() {
    return {
      userId: "",
      username: "",
      balance: "",

      set: {
        totalAmount: "",
        resAmount: "",
        tranAmount: "",
        liveAmount: "",
        playAmount: "",
        studyAmount: "",
        otherAmount: "",
      },

      used: {
        total: "",
        res: "",
        tran: "",
        live: "",
        play: "",
        study: "",
        other: "",
      },

      user: {
        // username: '请先登陆',
        avatar:
          "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      },
      hasLogin: false,

      isCollapse: false,
      activePath: "",
    };
  },

  methods: {
    iflogin(){
      console.log(window.sessionStorage.getItem("userId"))
      if(window.sessionStorage.getItem("userId") == null){
        this.$router.push('/login')
        return true
      }
    },
    getData() {
      this.userId = window.sessionStorage.getItem("userId"); //自动获取id

      // this.$message.success(this.userId); //弹出提示框

      this.$axios.get("/home?userId=" + this.userId).then((res) => {
        console.log(res); //得到结果

        // this.userId = res.data.data.userId;
        this.balance = res.data.data.balance; //返回余额
        this.username = res.data.data.username; //这里必须用两个data
        this.set.liveAmount = res.data.data.liveAmount;
        this.set.otherAmount = res.data.data.otherAmount;
        this.set.playAmount = res.data.data.playAmount;
        this.set.resAmount = res.data.data.resAmount;
        this.set.studyAmount = res.data.data.studyAmount;
        this.set.totalAmount = res.data.data.totalAmount;
        this.set.tranAmount = res.data.data.tranAmount;

        this.used.live = res.data.data.usedLive;
        this.used.other = res.data.data.usedOther;
        this.used.play = res.data.data.usedPlay;
        this.used.res = res.data.data.usedRes;
        this.used.study = res.data.data.usedStudy;
        this.used.total = res.data.data.usedTotal;
        this.used.tran = res.data.data.usedTran;

        // this.$message.success("获取成功！"); //弹出提示框
      });
    },

    // 页面跳转方法
    goHome() {
      this.$router.push("/Home");
    },
    goMyPage() {
      this.$router.push("/MyPage");
    },
    goLimit() {
      this.$router.push("/Limit");
    },
    goIncome() {
      this.$router.push("/Income");
    },
    goPay() {
      this.$router.push("/Pay");
    },
    goTransfer() {
      this.$router.push("/Transfer");
    },
    goWithdraw() {
      this.$router.push("/Withdraw");
    },
    goDeposit() {
      this.$router.push("/Deposit");
    },
    goTranInfo() {
      this.$router.push("/tranInfo");
    },
    TranToOther() {
      this.$router.push("/tranToOther");
    },
    // 登录
    login() {
      this.$router.push("/login");
    },
    logout() {
      const _this = this;
      this.$axios
        .get("/logout", {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
          // eslint-disable-next-line no-unused-vars
        })
        .then((res) => {
          _this.$store.commit("REMOVE_INFO");
          _this.$router.push("/login");
          console.log(res);
        });
    },
    // 计算进度条百分比
    getPercentage(set, used) {
      let percentage = ((used / set) * 100).toFixed(2);
      if (used == 0 && set == 0) {
        return 0;
      }
      if (percentage <= 100) {
        return percentage;
      } else {
        return 100;
        // return percentage;
      }
    },

    color(p) {
      if (p < 20) {
        return "#8BEE62";
      } else if (p < 40) {
        return "#CFEE62";
      } else if (p < 60) {
        return "#EEEA62";
      } else if (p < 80) {
        return "#EEB662";
      } else if (p < 90) {
        return "#EC864F";
      } else if (p < 100) {
        return "#EE6262";
      } else {
        return "#7D0000";
      }
    },

    format(set, used) {
      return () => {
        if (set == 0 && used == 0) {
          return "￥" + used;
        }
        if (used / set <= 1) {
          return "￥" + used;
        } else {
          return "已超出限额" + "￥" + (used - set).toFixed(2);
        }
      };
    },
  },

  created() {
    if(this.iflogin()){
      this.$message.error("请先登录")
      return
    }
    this.getData();
  },
};
</script>

<style lang="less" scoped>
.main_box {
  height: 28vh;
  // width: 30vw;
  background-color: #409eff;
  position: relative;
  // left: 35%;
  // margin: 20px 0px 0px 0px;
}

div .main_box {
  box-shadow: #dbdbdb 0px 0px 10px 3px;
}

div .mfbox {
  box-shadow: #dbdbdb 0px 0px 10px 3px;
}

// 设置图片圆形及上下左右间隔
.main_img {
  border-radius: 50%;
  margin: 20px 20px;
  float: left;
}

// 内容置于页面底端
.footer {
  height: 75px;
  position: fixed;
  bottom: 0;
}

.lbox {
  width: 110px;
  height: 30px;
  float: left;
  /* 能使两个div在一行显示 */

  background-color: #409eff;
  margin: 10px 70px;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  color: #ffffff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  cursor: pointer;
}

.rbox {
  width: 110px;
  height: 30px;
  float: right;
  background-color: rgb(170, 170, 170);
  margin: 10px 70px;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  color: #ffffff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  cursor: pointer;
}

.mfbox {
  height: 80px;
  width: 100%;
  background-color: #409eff;
  margin: 10px 0px 25px;
}

.mfcbox {
  height: 80px;
  width: 80px;
  float: left;
  // background-color: #409eff;
  color: #ffffff;
  // line-height: 80px;
  text-align: center;
  margin-left: 15px;
}

// 使此容器的图片独占一行
// .mfcbox img {
//   display: block;
// }

.mfcbox span {
  display: block;
}

/* 未访问 */
a:link {
  color: #fff;
  text-decoration: none;
}

/* 已访问 */
a:visited {
  color: #fff;
}
</style>

